﻿<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/ui.css" />
		<link rel="stylesheet" type="text/css" href="css/jq.growl.css" />
		<link rel="stylesheet" type="text/css" href="css/icons/style.css" />

		<script type="text/javascript" src="js/lib/appframework.min.js"></script>
		<script type="text/javascript" src="js/lib/ui.js"></script>
		<script type="text/javascript" src="js/lib/af.css3animate.js"></script>
		<script type="text/javascript" src="js/lib/af.scroller.js"></script>
		<script type="text/javascript" src="js/lib/jq.filterlist.js"></script>
		<script type="text/javascript" src="js/lib/DateFormater.js"></script>
		<script type="text/javascript" src="js/lib/LocalStore.js"></script>


		<script type="text/javascript" src="js/lib/jq.growl.js"></script>
		<script type="text/javascript" src="js/lib/fastclick.min.js"></script>
		<script type="text/javascript" src="js/lib/handlebars.js"></script>
		<script type="text/javascript" src="js/templates.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript" src="js/lib/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/readSms.js"></script>

		<script type="text/javascript">
            if (!((window.DocumentTouch && document instanceof DocumentTouch) || 'ontouchstart' in window)) {
                var script = document.createElement("script");
                script.src = "js/lib/af.desktopBrowsers.js";
                var tag = $("head").append(script);
            }
		</script>
	</head>
	<body>
		<script type="text/x-handlebars-template" id="conversationTmpl">
			<header>
				<span class="photo">
					<img class="logo" src="img/unknown.jpg" />
				</span>
				<span class="name">{{name}}</span>
				<span class="number">({{address}})</span>
			</header>
			<div class="messagesWrapper">
				<div class="scrollable" style="padding:15px">	
					{{#reverse-each messages}}
						<div class="message">
							<div class="{{getBubbleClass user}}">
								<div class="msg-date">{{formatDate date}}</div>
								<p>{{message}}</p>
							</div>
						</div>
					{{/reverse-each}}
				</div>
			</div>
			<div class="reply-box">
				<button class="btn reply-btn icon-email" data-address="{{address}}"></button>
				<div class="reply-field-wrapper">
					<textarea class="reply-field" placeholder="Μήνυμα..."></textarea>
				</div>
			</div>
		</script>
		<script type="text/x-handlebars-template" id="conversationsListTmpl">
			{{#each this}}
				<div class="contact" data-index="{{@index}}">
					<div class="photo">
						<img src="img/unknown.jpg" />
					</div>
					<div class="info">
						<div class="name">{{name}}</div>
						<div class="phone">({{address}})</div>
					</div>
					<div class="preview">{{previewMsg messages}}</div>
				</div>
			{{/each}}
		</script>
		<script type="text/x-handlebars-template" id="contactsListTmpl">
			<header>
				<button id="addRecipientButton" class="btn" style="float: right;font-weight: bold;">+</button>
				<div style="position:relative;overflow: hidden;">
					<input type="text" class="address-input ui-input" placeholder="Αριθμός ή Επαφή">
				</div>
			</header>
			<div class="contactsList">
				<ul class="scrollable ui-list">
				{{#each this}}
					<li>
						<input type="checkbox" onchange="composeView.onCheckboxChange(this)" class="ui-input ui-list-entry" id="contact-{{@index}}" data-index="{{@index}}"/>
						<label for="contact-{{@index}}">{{name}} <small style="font-size:12px">({{address}})</small></label>
					</li>
				{{/each}}
				</ul>
			</div>
			<div class="recipients-wrapper">
				<div style="font-weight: bold;">
					Αποστολή προς:
				</div>
				<div style="height:50px;">
					<div class="recipients scrollable">
					</div>
				</div>
			</div>
			<div class="reply-box">
				<button class="btn reply-btn icon-email" data-address="{{address}}"></button>
				<div class="reply-field-wrapper">
					<textarea class="reply-field" placeholder="Μήνυμα..."></textarea>
				</div>
			</div>
		</script>
		<div id="UI">
			<div class="splashScreen">
				<div class="logo-wrapper">
					<img src="img/logo2.png" />
				</div>
				<div class="info">
					<a class="info-link" href="#" onclick="$.ui.openExternalLink('http://www.terracom.gr');">&copy 2013 Terracom Informatics</a>
				</div>
			</div>
			<div class="header">
				<a id="backButton" class="btn btn-back icon-arrow-left-3" href="#"></a>
				<a class="btn btn-right icon-list" href="#" onclick="$.ui.showMenu()"></a>
				<a id="composeButton" class="btn btn-right icon-mail" href="#" onclick="$.ui.showPanel('#compose','fade')"></a>
				<div class="dynamic-header">
					<img class="logo" src="img/logo2.png">
				</div>
			</div>
			<div class="content">
				<div class="panel" id="info">
					<header><h3>INFO</h3></header>
					INFO
				</div>
				<div class="panel" id="settings">
					<header>
						<span class="header-title icon-cog" />
					</header>
					<div class="scrollable">
						<input type="checkbox" class="ui-input" id="c1"/>
						<label for="c1">Styled Check Box</label>
						<br />
						<input type="checkbox" class="ui-input" id="c2"/>
						<label for="c2">Styled Check Box</label>
						<br />
						<input type="radio" class="ui-input" id="r1" name="rr"/>
						<label for="r1"><span></span>Styled Radio button</label>
						<br />
						<input type="radio" checked class="ui-input" id="r2" name="rr"/>
						<label for="r2"><span></span>Styled Radio Button</label>
						
					</div>
				</div>
				<div class="panel" id="contactsList"></div>
			</div>
			<div id="menu" class="menu">
				<ul>
					<li>
						<a class="menu-link icon-enter" href="#">Είσοδος</a>
						<div id="loginForm">
							<label for="usernameField">Όνομα χρήστη:</label>
							<input type="text" class="ui-input" id="usernameField" />
							<label for="passwordField">Κωδικός:</label>
							<input type="password" class="ui-input" id="passwordField" />
							<button id="loginButton" class="btn">Είσοδος</button>
						</div>
						<div id="profileInfo">
							<span id="username"></span>
							<a class="icon-exit" href="#">Αποσύνδεση</a>
						</div>
					</li>
					<li><a class="menu-link icon-signup" onclick="$.ui.openExternalLink('http://www.liveall.eu/user/register');">Εγγραφή</a></li>
					<li><a class="menu-link icon-question" href="#">Υπόλοιπο</a></li>
					<li><a class="menu-link icon-info" href="#" onclick="$.ui.showPanel('#info')">Πληροφορίες</a></li>
					<li><a class="menu-link icon-cog" onclick="$.ui.showPanel('#settings')"href="#">Ρυθμίσεις</a></li>
					<li></li>
				</ul>
				<a class="btn btn-close icon-cross" href="#" onclick="$.ui.hideMenu()"></a>
			</div>
		</div>
	</body>
</html>